<template>
    <div class="info">
        <Title>个人资料</Title>
        <div class="form">
            <el-form label-position="right" label-width="60px" :model="form">
                <el-form-item label="ID">
                    <el-input v-model="form.id" disabled></el-input>
                </el-form-item>
                <el-form-item label="账号">
                    <el-input v-model="form.username"></el-input>
                </el-form-item>
                <el-form-item label="昵称">
                    <el-input v-model="form.nickname"></el-input>
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input v-model="form.phone"></el-input>
                </el-form-item>
                <el-form-item label="收货地">
                    <el-input v-model="form.address"></el-input>
                </el-form-item>
                <div class="btns">
                    <el-button type="primary" class="modify" @click="save">保存</el-button>
                </div>
            </el-form>
        </div>
        <el-divider />
        <Title>修改密码</Title>
        <div class="form">
            <el-form label-position="right" label-width="60px" :model="password">
                <el-form-item label="旧密码">
                    <el-input show-password type="password" v-model="password.oldPassword" placeholder="请输入旧密码"></el-input>
                </el-form-item>
                <el-form-item label="新密码">
                    <el-input show-password type="password"  v-model="password.newPassword" placeholder="请输入新密码"></el-input>
                </el-form-item>
                <div class="btns">
                    <el-button type="primary" class="modify" @click="changePassword">确认修改</el-button>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/useUser'
import { ElMessage } from 'element-plus'
import Title from '@/components/Title.vue'
import { userinfo, edit, changepassword } from '@/api/user'


const userStore = useUserStore()

const form = reactive({
    id: '',
    username: '',
    nickname: '',
    phone:'',
    address:''
})

const password = reactive({
    oldPassword: '',
    newPassword: ''
})

//获取用户信息
const getUserinfo = () => {
    userinfo({id: userStore.userinfo.id}).then(res => {
        if (res.data.code == 200) {
            form.id = res.data.user.id
            form.username = res.data.user.username
            form.nickname = res.data.user.nickname
            form.address = res.data.user.address
            form.phone = res.data.user.phone
        }
    })
}

getUserinfo()

//保存修改
const save = () => {
    edit({
        id: form.id,
        username: form.username,
        nickname: form.nickname,
        phone: form.phone,
        address: form.address
    }).then(res => {
        if(res.data.code === 200){
            ElMessage.success(res.data.message)
        }else{
            ElMessage.success(res.data.message)
        }
    }).catch(err => {
        ElMessage.error(err)
    })
}

//保存修改密码
const changePassword = () => {
    changepassword({
        id: userStore.userinfo.id,
        oldPassword: password.oldPassword,
        newPassword: password.newPassword
    }).then(res => {
        if(res.data.code === 200){
            ElMessage.success(res.data.message)
            password.oldPassword = ''
            password.newPassword = ''
        }else{
            ElMessage.error(res.data.message)
        }
    }).catch(err => {
        ElMessage.error(err)
    })
}
</script>

<style scoped lang='less'>
.info {
    .form {
        margin-top: 30px;
        padding: 30px;
        border-radius: 10px;

        .btns {
            text-align: end;
        }
    }
}
</style>